const separator = document.querySelector('.separator');
const scalable =  document.querySelector('.scalable');

let startX,startWidth;
separator.addEventListener('mousedown',startDrag);

function startDrag(e){
    startX = e.clientX;
    console.log(startX);
    startWidth = parseInt(window.getComputedStyle(scalable).width) ;
    document.addEventListener('mousemove',onDrag);
    document.addEventListener('mouseup',stopDrag);
}

function onDrag(e){
    let newWidht = startWidth + e.clientX - startX;
    scalable.style.width = newWidht + 'px';
}

function stopDrag(e){
    document.removeEventListener('mousemove',onDrag);
    document.removeEventListener('mouseup',stopDrag);
}